<template>
  <div class="content container">
    <div class="title">{{data.title}}</div>
    <div class="article-des">
      <span class="time">
        {{data.create_time}}
        <router-link to="/about">{{data.creator}}</router-link>
      </span>
      <span class="label">
        标签:
        <router-link v-for="item in data.labels" :key="item" to="/">{{item}}</router-link>
      </span>
    </div>
    <div class="toc ztree" v-if="toc" v-html="toc"></div>
    <div class="blog-entry" id="blog-entry" v-hljs v-html="html_content"></div>
    <a href="#" class="back" v-if="isBack">返回顶部</a>
  </div>
</template>

<script>
import error from "base/404";
import * as md from "assets/md";
export default {
  props: ["id"],
  directives: {
    hljs: {
      // 指令的定义
      update: function(el) {
        let blocks = el.querySelectorAll("pre code");
        Array.prototype.forEach.call(blocks, md.hljs.highlightBlock);
      }
    }
  },
  data() {
    return {
      data: "",
      html_content: "",
      toc: "",
      url: "/Essay/article/",
      noText: false,
      isBack: false
    };
  },
  created() {
    this.getContent();
  },
  mounted() {
    $(window).on("scroll", () => {
      if ($(window).scrollTop() > $(window).outerHeight()) {
        this.isBack = true;
      } else {
        this.isBack = false;
      }
    });
  },
  methods: {
    getContent() {
      this.$http.get(this.domain + this.url + this.id).then(
        res => {
          this.data = res.data;
          if (res.data.content) {
            this.html_content = md.tocF(res.data.content).text;
            this.toc = md.tocF(res.data.content).tocStr || "";
          } else if (res.data.rich_text) {
            this.html_content = res.data.rich_text;
          } else {
            this.html_content = res.data.html_content;
          }

          this.$http.post(this.domain + "/statistics", {
            namespace: window.location.hostname,
            subject: this.id,
            subject_desc: this.data.title,
            v_time: Date.now()
          });
        },
        res => {
          this.$router.push("/error");
        }
      );
    }
  },
  watch: {
    "data.html_content": {
      // 注意：当观察的数据为对象或数组时，val和oldVal是相等的，因为这两个形参指向的是同一个数据对象,当单观察数据为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数
      handler: function(val, oldVal) {
        this.$nextTick(function() {
          md.renderMathInElement(document.body);
        });
      }
    },
    id(to) {
      this.getContent();
      window.scrollTo(0, 0);
    }
  },
  components: {
    error
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped rel="stylesheet/stylus" lang="stylus">
@import '../../../static/css/highlight.css';
@import '../../../static/css/katex.min.css';

.content {
  padding: 20px;
}

.content .title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  padding: 10px 0 16px;
}

.content .article-des {
  font-size: 14px;
  font-weight: 300;
  color: #858585;
  padding-bottom: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid #dddce0;
}

.content .label {
  margin-left: 40px;
}

.content .article-des a {
  margin-left: 4px;
  color: #78a5f1;
}

.toc {
  border: 1px solid #dddce0;
  padding: 20px;
  border-radius: 12px;
  margin-top: 20px;
}

.back {
  position: fixed;
  right: 6%;
  bottom: 6%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  text-align: center;
  line-height: 20px;
}

.blog-entry li {
  word-break: break-all;
}

@media (min-width: 768px) {
  .toc {
    position: fixed;
    top: 164px;
    left: 67%;
    width: 30%;
    max-width: 400px;
    max-height: calc(100vh - 200px);
    overflow: auto;
  }

  .toc+.blog-entry, .toc+.blog-entry+.comment {
    width: 67%;
  }
}

@media (max-width: 768px) {
  .content .label {
    display: block;
    margin: 4px 0;
  }
}
</style>
